<template>
  <el-dialog
    title="猫咪列表"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      :data="tableData"
      :table-loading="tableLoading"
      :option="catOption"
    >
      <template v-slot:petAvatar="{ row }">
        <img
          :src="row.petAvatar"
          class="petAvatar"
        />
      </template>
      <template v-slot:petCode="{ row }">
        <el-button
          type="text"
          @click="showPetDialog(row.petId)"
        >
          {{ row.petCode }}
        </el-button>
      </template>
      <template v-slot:adoptUserNickname="{ row }">
        <div
          v-if="row.adoptUserId"
          class="adoptUser"
          @click="showUserInfoDialog(row.adoptUserId)"
        >
          <img
            :src="row.adoptUserAvatar"
            class="avatar"
          />
          <el-button type="text">
            {{ row.adoptUserNickname }}
          </el-button>
        </div>
      </template>
    </avue-crud>
    <userInfoDialog
      v-model="userVisible"
      :user-id="userId"
    ></userInfoDialog>
    <petDetailPopup
      :id="petId"
      v-model="petVisible"
    ></petDetailPopup>
  </el-dialog>
</template>
<script>
import { catOption } from '@/const/crud/pet/adoptionArea.js';
import { getAdoptAreaPet } from '@/api/core/adopt';
import userInfoDialog from '@/views/community-content/component/userInfoDialog.vue';
import petDetailPopup from '@/views/pet/base-file/components/detailPopup.vue';

export default {
  components: {
    userInfoDialog,
    petDetailPopup,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      catOption,
      tableData: [],
      tableLoading: false,
      petVisible: false,
      userVisible: false,
      userId: '',
      petId: '',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getAdoptAreaPet();
      } else {
        this.tableData = [];
        this.tableLoading = false;
      }
    },
  },
  methods: {
    getAdoptAreaPet() {
      this.tableLoading = true;
      getAdoptAreaPet(this.id).then((res) => {
        if (res.data.code === 0) {
          this.tableData = res.data.data;
        }
      });
      this.tableLoading = false;
    },
    showPetDialog(id) {
      this.petId = id;
      this.petVisible = true;
    },
    showUserInfoDialog(id) {
      if (id) {
        this.userId = id;
        this.userVisible = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.petAvatar {
  width: 40px;
  height: 40px;
}
.adoptUser {
  display: flex;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 3px;
  }
}
</style>
